<template>
	<view class="bg-white" style="min-height: 100vh;">
		<cu-custom :title="title" usertype="usertype" tokenid="tokenid" rightIcon="search" @rightClick="rightClick"></cu-custom>

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption">
			<!-- 课程列表 -->
			<view  @click="routerGo(kcitem)" class="flex align-start margin-top-lg solid-bottom padding-bottom padding-lr"
				 v-for="(kcitem,index) in kcList"  :key="index">
				<u--image :showLoading="true" radius="10rpx"
					:src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`" width="160rpx" height="160rpx">
				</u--image>
				<view class="flex-sub margin-left-sm">
					<view class="flex">
						<view class="text-cut text-lg text-bold" style="display: none;">{{kcitem.Tocken_id}}</view>
						<view class="text-cut text-lg text-bold">{{kcitem.UserName}}</view>
						<view class="margin-left text-gray">{{kcitem.PostJob}}</view>
						<view class="recommend-tap text-white text-sm flex align-center justify-center margin-left-sm">
							{{kcitem.Recded}}
						</view>
					</view>

					<view class="margin-top-xs flex align-center">
						<u-rate :value="kcitem.RatStar" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
						<text class="margin-left-xs text-red">{{kcitem.RatStar}}</text>
					</view>

					<view class="flex flex-between margin-top-sm">
						<view class="flex align-center">
							<u-icon name="map-fill" size="36rpx" color="#999999"></u-icon>
							<view class="margin-left-xs text-cut" style="flex: 0 0 270rpx; width: 270rpx;">
								{{kcitem.Adress}}
							</view>
						</view>
						<text class="margin-left-sm">
							{{kcitem.Distance}}KM
						</text>
					</view>

					<view class="margin-top text-lg text-cut" style="width: 500rpx;">
						擅长：{{kcitem.Subject}}
					</view>
					<view class="margin-top-sm text-red text-bold text-lg text-cut text-right">
						{{kcitem.MakeApp}}人预约过
					</view>
				</view>
			</view>

			<!-- 暂无内容 -->
			<u-empty v-if="false" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</mescroll-body>

		<!-- 筛选弹窗 -->
		<u-popup :show="screenShow" @close="screenClose" mode="right" safeAreaInsetTop>
			<view class="padding-tb padding-left flex flex-direction" style="width: 550rpx; min-height: 100vh;">
				<view style="flex: auto">
					<view class="text-lg margin-top-lg">
						考过科目
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in kmList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="item.isSelect = !item.isSelect" :plain="item.isSelect" type="primary"
								:text="item.name" :color="item.isSelect ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: item.isSelect ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>

					<view class="text-lg margin-top-lg">
						学段
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in xdList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="item.isSelect = !item.isSelect" :plain="item.isSelect" type="primary"
								:text="item.name" :color="item.isSelect ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: item.isSelect ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>

					<view class="text-lg margin-top-lg">
						排列方式（单选）
					</view>
					<view class="flex flex-wrap">
						<view v-for="(item,index) in plList" class="margin-top-sm margin-right-sm"
							style="width: 150rpx;">
							<u-button @tap="plIndex == index ? plIndex = null : plIndex = index"
								:plain="plIndex == index" type="primary" :text="item.name"
								:color="plIndex == index ? '#ea3457' : '#f8f8f8'"
								:customStyle="{color: plIndex == index ? '#ea3457' : '#666', width: '150rpx',height: '66rpx'}">
							</u-button>
						</view>
					</view>
				</view>


				<view class="flex-shrink flex padding-right">
					<u-button @click="resetting" color="#f8f8f8" type="primary" text="重置":customStyle="{color: '#666'}">
					</u-button>
					
					<u-button @click="submit" class="margin-left" color="#ea3457" type="primary" text="确定">
					</u-button>
				</view>
			</view>
		</u-popup>

		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				searchword: '', //搜索关键字
				list: [],
				// 上拉加载的配置(可选)
				upOption: {
					use: true, //是否启用上拉加载
				},
				courid:'',
				title: '',
				usertype:'',
				tokenid:'',
				
				kcitemIndex:0,
				kcList:[],
				
				//筛选
				screenShow: false, //是否显示
				//考过科目
				kmIndex: [],
				kmList: [{
						name: '语文',
						isSelect: false
					},
					{
						name: '数学',
						isSelect: false
					},
					{
						name: '英语',
						isSelect: false
					},
					{
						name: '物理',
						isSelect: false
					},
					{
						name: '化学',
						isSelect: false
					},
					{
						name: '生物',
						isSelect: false
					},
					{
						name: '政治',
						isSelect: false
					},
					{
						name: '历史',
						isSelect: false
					},
					{
						name: '地理',
						isSelect: false
					}
				],

				//学段
				xdIndex: [],
				xdList: [{
						name: '高中',
						isSelect: false
					},
					{
						name: '初中',
						isSelect: false
					},
					{
						name: '小学',
						isSelect: false
					}
				],
				//排列方式
				plIndex: 0,
				plList: [{
						name: '按距离'
					},
					{
						name: '按人气'
					},
					{
						name: '按活跃度'
					}
				]
			}
		},
		onLoad(e) {
			console.log(e);
			this.courid = e.courid;
			this.title = e.name;
			this.usertype=e.usertype;
			this.tokenid=e.tokenid;
			
			console.log(this.courid+';'+this.title+';'+this.usertype+';'+this.tokenid);
			
			let urlkc='/GetPlannerextListInfos/'
			this.$H.post(urlkc).then(res =>{
					console.log(res.code);
					if(res.code==200)
					{
						this.kcList = res.data;
					}
				})
		},
		onShow() {
			
			
		},
		methods: {
			//筛选弹窗
			rightClick() {
				this.screenShow = true
			},
			//关闭筛选弹窗
			screenClose() {
				this.screenShow = false
			},
			
			// 重置
			resetting(){
				this.plIndex = 0
				this.kmList.forEach(item=>{
					item.isSelect = false
				})
				this.xdList.forEach(item=>{
					item.isSelect = false
				})
			},
			
			//确认搜索
			submit(){
				this.screenClose()
			},
			
			//切换Tab
			curriculumTypeTab(kcitem) {
				this.kcitemIndex = kcitem.index
			},
			//路由跳转
			routerGo(kcitem){
				console.log(kcitem.Tocken_id);
				this.$routerGo(`/pages/index/course-details?courid=${this.courid}&&usertoken_id=${this.tokenid}&&user_type=${this.usertype}&&pagetoken_id=${kcitem.Tocken_id}&&pageuser_type=${this.title}`)
			},
			//获取商品列表
			getList(page) {
				const params = {
					currentPage: page,
					pageSize: 20,
					searchword: this.searchword
				}
				this.$http.post('/api/Users/GetCBFBusiness', params).then(res => {

					if (page == 1) this.list = []; //如果是第一页需手动置空列表

					this.list = [...this.list, ...res.list] //合并数据

					setTimeout(() => {
						this.mescroll.endBySize(res.list.length, res.pageTotal); // 请求成功,隐藏加载状态
					}, 400)
				}).catch(() => {
					this.mescroll.endErr(); // 请求失败,隐藏加载状态
				})
			},

			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				// this.getList(pageNum)
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-tap {
		width: 110rpx;
		height: 36rpx;
		background-image: url('/static/images/ico/tag-2.png');
		background-size: 100% 100%;
		flex: 0 0 110rpx;
	}
</style>
